.root {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #e3e7f1;
  position: fixed;
  top: 0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.headerBox {
  width: 80vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.shadowHeader {
  box-shadow: 0 3px 4px 0 rgba(227, 231, 241, 0.5);
  z-index: 1000;
}

.currentPage {
  & > a {
    color: #473a54;

    & > span {
      color: #473a54;
      border-bottom: solid 2px #473a54;
    }
  }
}

.item {
  & > a {
    color: #77628c;
    font-weight: 400;
    font-size: 18px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
      color: #473a54;
    }
  }
}
